<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My first Three.js app</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/three.min.js" type="text/javascript"></script>
    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>
    <script type="text/javascript">

        $(function() {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            var stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            document.body.appendChild( stats.domElement );

            var materials = [ ];

            geometry1 = new THREE.BoxGeometry(100, 50, 50);
            var matrix1 = new THREE.Matrix4();
            matrix1.makeTranslation(75, 75, 75);
            finalGeometry = new THREE.BoxGeometry(25, 50, 100);
            finalGeometry.merge(geometry1, matrix1, 1);
            var texture = createLabel("HELLO WORLD", 0, 100, "black", "yellow");

            var material = new THREE.MeshBasicMaterial({map: texture });
            materials.push(material);

            for (var i = 0, l = finalGeometry.faces.length; i < l; i++) {
                finalGeometry.faces[i].materialIndex = 0;
            }

            console.log(finalGeometry.faces);

            box = new THREE.Mesh(finalGeometry, new THREE.MeshFaceMaterial( materials ));

            scene.add(box);
            camera.position.z = 500;
            var render = function () {
                requestAnimationFrame(render);
                box.rotation.x += 0.01;
                box.rotation.y += 0.01;
                renderer.render(scene, camera);
                stats.update();
            };
            render();
        });

        function generateTexture(number) {
//            var bitmap = document.createElement('canvas');
//            bitmap.width = 200;
//            bitmap.height = 200;
//            var g = bitmap.getContext('2d');
//            g.fillStyle = "#FF0000";
//            g.fill();
//            g.fillText(number.toString(), 0, 20);
//            return bitmap;
        }

        function createLabel(text, size, color, backGroundColor, backgroundMargin) {
            if(!backgroundMargin)
                backgroundMargin = 50;
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
            context.font = size + "pt Arial";
            var textWidth = context.measureText(text).width;
            canvas.width = textWidth + backgroundMargin;
            canvas.height = size + backgroundMargin;
            context = canvas.getContext("2d");
            context.font = size + "pt Arial";
            if (backGroundColor) {
                context.fillStyle = backGroundColor;
                context.fillRect(canvas.width / 2 - textWidth / 2 - backgroundMargin / 2, canvas.height / 2 - size / 2 - +backgroundMargin / 2, textWidth + backgroundMargin, size + backgroundMargin);
            }
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillStyle = color;
            context.fillText(text, canvas.width / 2, canvas.height / 2);
            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        }

    </script>
</head>
<body>
</body>
</html>